
function renderCommentItems(comment) {
    return `
    <li>
        <div><span><img src="${comment.author.avatar_url}" width="24" />${comment.author.loginname}</span>:</div>
        <div>${comment.content}</div>
    </li>
`;
}

function renderTopicItem(topic) {
    return `
    <li id="${topic.id}" style="border: 1px solid gray">
        <h4>${topic.title}</h4>
        <div>${topic.content}</div>
        <ol style="border: 1px solid gray">
            ${topic.replies.map(renderCommentItems).join('\n')}
        </ol>
    </li>
`;
}

export function renderTopicsWithCommentTop10(topicList){
    return `
        <ul>
            ${topicList.map(renderTopicItem).join('\n')}
        </ul>
    `;
}
